<template>
  <div class="index">
    <!--轮播图 start-->
    <mt-swipe :auto="4000" :show-indicators="false">
      <mt-swipe-item v-for="(item, i) in swipeItemList" :key="i">
        <a :href="item.url"><img :src="item.imgSrc" :title="item.imgMsg"/>
          <p class="mui-slider-title">{{item.imgMsg}}</p></a>
      </mt-swipe-item>
    </mt-swipe>
    <!--轮播图 end-->

    <!--九宫格 start-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/hotGoods"><img src="/static/images/menu1.png"></router-link>
        <div class="mui-media-body">热门单品</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/setMeal"><img src="/static/images/menu2.png"></router-link>
        <div class="mui-media-body">优惠套餐</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/activities"><img src="/static/images/menu3.png"></router-link>
        <div class="mui-media-body">门店活动</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/idle"><img src="/static/images/menu4.png"></router-link>
        <div class="mui-media-body">闲货</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/leavewordlist"><img src="/static/images/menu5.png"></router-link>
        <div class="mui-media-body">"想说"</div>
      </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
        <router-link to="/index/feedback"><img src="/static/images/menu6.png"></router-link>
        <div class="mui-media-body">客户反馈</div>
      </a></li>
    </ul>
    <!--九宫格 end-->

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        swipeItemList: [
         /* {
            id: '1',
            imgSrc: 'https://img.infinitynewtab.com/wallpaper/1677.jpg',
            url: 'http://www.baidu.com',
            imgMsg: '这是第1677张图'
          },
          {
            id: '2',
            imgSrc: 'https://img.infinitynewtab.com/wallpaper/1678.jpg',
            url: 'http://www.google.com',
            imgMsg: '这是第1678张图'
          }*/
        ]
      };
    },
    methods: {
      getSwipeItemList(){/*获取轮播图的列表*/
        //TODO 从后台获取数据
       /*
        从后台获取数据
       this.$http.get('').then(response => {
          console.log(response.body);
        })*/
       this.swipeItemList = [
          {
            id: '1',
            imgSrc: 'https://img.infinitynewtab.com/wallpaper/1677.jpg',
            url: 'http://www.baidu.com',
            imgMsg: '这是第1677张图'
          },
          {
            id: '2',
            imgSrc: 'https://img.infinitynewtab.com/wallpaper/1678.jpg',
            url: 'http://www.google.com',
            imgMsg: '这是第1678张图'
          }
       ]
      }
    },
    created(){
      this.getSwipeItemList();
    }
  }
</script>

<style scoped>
  .mint-swipe {
    height: 200px;
  }

  li img {
    width: 60px;
    height: 60px;
  }

  .mui-media-body {
    font-size: 13px;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .mui-grid-view.mui-grid-9 {
    border: 0;
    background-color: #ffffff;
  }

  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: 0;
  }

</style>
